<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.push('/layout/user')"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="profileObj.photo"
            @click="selectPhotoFn"
          />
          <input
            type="file"
            @change="upLoadPhotoFn"
            hidden
            name=""
            id=""
            ref="clickfile"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="profileObj.name"
        @click="updatenameFn"
      />
      <van-cell
        title="性别"
        is-link
        :value="profileObj.gender === 1 ? '男' : '女'"
      />
      <van-cell title="生日" is-link :value="profileObj.birthday"      @click="show = true" />
    </van-cell-group>

    <!-- 修改用户名组件 -->
    <van-dialog
      v-model="isDialogShow"
      :before-close="ondialogFn"
      title="更新名称"
      show-cancel-button
    >
      <van-field
        placeholder="请输入要修改的名称"
        v-model.trim="username"
        v-focus
      ></van-field
    ></van-dialog>
    <!-- 修改生日组件 -->

    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-datetime-picker
        v-model="current"
        type="date"
        title="选择年月日"
        :min-date="min"
        :max-date="max"
        @confirm="confirmFn"
        @cancel="cancelFn"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Notify, Toast } from 'vant'
// 引入用户个人资料组件
import {
  getUserProfileAPI,
  updateUserPhotoAPI,
  updateusernameAPI
} from '../../api/user'
// 引入时间转换模块
import moment from 'moment'
export default {
  name: 'UserEdit',
  data () {
    return {
      profileObj: {}, // 用户个人资料
      isDialogShow: false, // 控制弹出框显示隐藏
      username: '', // 用户需要更改的名字
      min: new Date(1921, 0, 1), // 选择日期下限
      max: new Date(), // 选择日期上限
      current: new Date(), // 当前生日
      show: false // 日期弹出层显示隐藏
    }
  },
  async created () {
    // 调用接口获取个人资料数据
    const res = await getUserProfileAPI()
    // 将数据赋值给空对象
    this.profileObj = res.data
    // console.log(res)
    this.current = new Date(res.data.birthday)
  },
  methods: {
    // 注册vuex
    ...mapMutations(['setUserObj']),
    // 点击按钮调用上传图片按钮
    selectPhotoFn () {
      this.$refs.clickfile.click()
    },
    // file输入框绑定change事件
    async upLoadPhotoFn (e) {
      // 结构赋值
      const { 0: file } = e.target.files
      // 结构赋值
      const { name, size } = file
      // 正则表达式
      const reg = /\.(png|jpe?g|gif|svg|webp)$/i
      // 1. 判断用户上传的文件格式
      if (!reg.test(name)) {
        return Toast.fail('请选择图片格式文件!')
      }
      // 2. 判断用户上传的文件大小
      if (size / 1024 / 1024 > 2) {
        return Toast.fail('上传的图片不能超过2M')
      }

      try {
        //  form构造函数实例化对象
        const form = new FormData()
        // 将数据添加到对象内
        form.append('photo', file)
        // 调用接口获取
        const res = await updateUserPhotoAPI({
          form
        })
        this.profileObj.photo = res.data.photo
        Toast.success('更换头像成功!')
      } catch (err) {
        throw new Error(err)
      }
    },
    // 用户点击修改名字方法
    updatenameFn () {
      this.username = this.profileObj.name
      this.isDialogShow = true
    },
    // 用户点击按钮修改昵称的方法
    ondialogFn (action, done) {
      if (action === 'cancel') {
        done()
      } else {
        if (!this.username) {
          Notify({ type: 'warning', message: '名称不能为空!' })
          done(false)
        } else {
          try {
            // 调用接口
            updateusernameAPI({
              name: this.username,
              birthday: this.profileObj.birthday
            })
            // 更新本本地数据
            this.profileObj.name = this.username
            this.username = ''
            // 隐藏弹出框
            done()
            Toast.success('更新昵称成功!')
          } catch (err) {
            Toast.fail('更新昵称失败!')
          }
        }
      }
    },
    // 修改生日点击确定触发的事件
    confirmFn (value) {
      try {
        const str = moment(value).format('YYYY-MM-DD')
        // console.log(str)
        // 调用接口
        updateusernameAPI({
          name: this.profileObj.name,
          birthday: str
        })
        // 关闭弹出框
        this.cancelFn()
        // 修改本地数据
        this.profileObj.birthday = str
        // 给出提示
        Toast.success('更新生日成功!')
      } catch (err) {
        Toast.fail('更新生日失败!')
      }
    },
    // 修改生日点击取消触发的事件
    cancelFn () {
      // 点击取消关闭弹出层
      this.show = false
    }
  },
  watch: {
    profileObj (newval) {
      this.setUserObj(newval)
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
